<template>
  <div>
    <table class="table-dom" style="width: 100%;table-layout: fixed">
      <thead>
        <tr class="table-title">
          <td style="width:1.6rem;">品名/规格</td>
          <td style="width:2rem;">{{priceText}}</td>
          <td>涨跌</td>
          <td>产地</td>
          <td style="width:1rem;">操作</td>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(i,index) in list"
          :key="index"
          class="router-link-bg table-item"
          :class="'table-item-'+i.flag"
          @click="getDtails('/priceDetail',i)"
        >
          <td class="table-item-list guige" style="width:30%">
            <p>{{i.kname}}</p>
            <p>{{i.specs}}</p>
          </td>
          <td class="table-item-list table-item-price">
            <p>{{i.price}}</p>
            <p class="priceQj" v-if="!priceQj">{{i.minPrice}}~{{i.maxPrice}}</p>
          </td>
          <td class="table-item-list table-item-status">
            <div class="status-but">
              <i v-if="i.flag!='normal'">{{i.gain}}</i>
              <i v-else>--</i>
            </div>
          </td>
          <td class="table-item-list">{{i.origin}}</td>
          <td class="table-item-list" @click.stop>
            <van-switch
              v-model="i.select"
              @input="onInput(i)"
              size="16px"
              active-color="#E49829"
              inactive-color="#FFF9F0"
            />
            <div class="refuse" v-if="!isLogin || notMember" @click="refuse"></div>
          </td>
        </tr>
      </tbody>
    </table>
    <loginForm ></loginForm>
    <notMember></notMember>
  </div>
</template>
<script type="text/ecmascript-6">
import { getchannelpricelist, updateyprice } from "../../api/price";
import loginForm from "../../components/tipsLogin";
import notMember from "./notMember";
export default {
  components: {
    loginForm,
    notMember
  },
  data() {
    return {
      list: [],
      rescode:"",
      isLogin: this.$store.state.islogin,
      priceText: this.$route.query.channel === "dlg" ? "价格" : "均价/价格区间",
      priceQj: this.$route.query.channel === "dlg" ? true : false
    };
  },
  computed: {
    login(){
      return this.$store.state.islogin
    },
    pricepartObj() {
      return this.$store.state.nocaches.pricepartObj;
    },
    notMember() {
      return this.$store.state.nocaches.notMemberobj.notMember;
    }
  },
  watch: {
     login(n, o) {
      this.isLogin=n
    },
    notMember(n, o) {
      return n;
    },
    pricepartObj(news, old) {
      let params = { channel: this.$route.query.channel };
      params = Object.assign(params, news);
      this.channelpricelist(params);
    }
  },
  methods: {
    refuse() {
      if (this.$store.state.nocaches.notMemberobj.notMember) {
        this.$store.commit("munotMember", {
          notMember: true, //是否是该频道会员
          notMembershow: true
        });
        return false;
      }
      if (!this.isLogin) {
        this.$store.commit("muloginmoduleshow", true);
        return false;
      }
    },

    getDtails(url, query) {
      if (this.$store.state.nocaches.notMemberobj.notMember) {
        this.$store.commit("munotMember", {
          notMember: true, //是否是该频道会员
          notMembershow: true
        });
        return false;
      }
      if (!this.isLogin && this.rescode!="0000") {
        this.$store.commit("muloginmoduleshow", true);
        return false;
      }
      this.$router.push({ path: url, query: query });
    },
    channelpricelist(obj) {
      getchannelpricelist(obj).then(res => {
        this.list = [];
        this.rescode="";
        
        if (res.code == "0000") {
          this.$store.commit("munotMember", {
            notMember: false, //是否是该频道会员
            notMembershow: false
          });
          this.rescode = "0000";
          if (!this.isLogin) {
              document.querySelector(".login-dom").style.display="none"
          }
        
          if (res.data.length > 0) {
            for (let index = 0; index < res.data.length; index++) {
              const element = res.data[index];
              if (element.select == 1) {
                element.select = true;
              } else {
                element.select = false;
              }
            }
          }
          this.list = res.data;
        } else if (res.code == "0007" || res.code == "0009") {
          if (!this.isLogin) {
              document.querySelector(".login-dom").style.display=""
          }
          if (res.code == "0007") {
            this.$store.commit("munotMember", {
              notMember: true, //是否是该频道会员
              notMembershow: true
            });
          } else {
            this.isLogin = false;
          }
          if (res.data.length == 0) {
            this.$toast("暂无数据");
          }
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            element.select = false;
          }
          this.list = res.data;
        }
      });
    },

    onInput(i) {
      let obj = {};
      obj.channel = i.channel;
      obj.id = i.id;
      if (i.select) {
        obj.op = "add";
      } else {
        obj.op = "del";
      }
      this.updateyprice(obj);
    },
    updateyprice(obj) {
      updateyprice(obj).then(res => {
        if (res.code == "0000") {
          this.$store.dispatch("acLoginprice", obj);
        } else {
          this.$toast(res.msg);
        }
      });
    }
  },
  created() {
    this.$nextTick(() => {
      let obj = this.$store.state.nocaches.pricepartObj;
      this.channelpricelist(obj);
    });
  }
};
</script>
<style scoped lang="less">
.table-dom {
  word-wrap: break-word;
  word-break: break-all;
  .table-title {
    height: 0.64rem;
    line-height: 0.64rem;
    background: rgba(245, 243, 242, 1);
    font-size: 0.26rem;
    text-align: center;
    color: rgba(110, 111, 117, 1);
  }
  .router-link-bg {
    background: #ffffff;
    &:nth-child(2n + 1) {
      background: rgba(249, 249, 249, 1);
    }
  }
  .table-item {
    height: 1.08rem;
    text-align: center;
    color: rgba(39, 41, 55, 1);
    font-size: 0.26rem;
    line-height: 1.5;
    td {
      position: relative;
      p {
        margin: 0.1rem;
      }
      .priceQj {
        margin: 0 0.1rem;
        font-size: 0.2rem;
        color: rgba(39, 41, 55, 0.6);
      }
      .refuse {
        width: 100%;
        height: 1.08rem;
        position: absolute;
        top: 0;
        left: 0;
        // background: red;
        z-index: 1;
      }
    }
    // .guige {
    //   width: 30%;
    // }
    .status-but {
      display: inline-block;
      height: 0.4rem;
      padding: 0 0.1rem;
      font-size: 0.2rem;
      background: #f4f4f4;
      line-height: 0.4rem;
      position: relative;
      border-radius: 0.05rem;
      overflow: hidden;
      i {
        position: relative;
        height: 100%;
        display: inline-block;
      }
    }
    &.table-item-down {
      .table-item-price {
        color: #37a10c;
      }
      .status-but {
        background: #ebf5e6;
        color: #37a10c;
        i {
          padding-left: 0.3rem;
          &::after {
            display: block;
            content: "";
            border-width: 0.1rem;
            border-style: solid;
            border-color: #37a10c transparent transparent transparent;
            position: absolute;
            top: 0.13rem;
            left: 0rem;
          }
        }
      }
    }
    &.table-item-up {
      .table-item-price {
        color: #d82d27;
      }
      .status-but {
        background: #fdefef;
        color: #d82d27;
        i {
          padding-left: 0.3rem;
          &::after {
            display: block;
            content: "";
            border-width: 0.1rem;
            border-style: solid;
            border-color: transparent transparent #d82d27 transparent;
            position: absolute;
            top: 0.03rem;
            left: 0rem;
          }
        }
      }
    }
  }
}

.member {
  padding: 20px;
  line-height: 1.5;
  a {
    color: #e49829;
  }
}
</style>
